import { ElSubMenu, ElMenuItem } from 'element-plus'
import { unref } from 'vue'
import { hasOneShowingChild } from '../helper'
import { isUrl } from '@/utils/is'
import { useRenderMenuTitle } from './useRenderMenuTitle'
import { pathResolve } from '@/utils/routerHelper'
import { useDesign } from '@/hooks/web/useDesign'

const { getPrefixCls } = useDesign()
const prefixCls = getPrefixCls('submenu')

const { renderMenuTitle } = useRenderMenuTitle()

export const useRenderMenuItem = (menuMode) => {
  const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/', currentLevel = 1) => {
    return routers
      .filter((v) => !v.meta?.hidden)
      .map((v) => {
        const meta = v.meta ?? {}
        const { oneShowingChild, onlyOneChild } = hasOneShowingChild(v.children, v)
        const fullPath = isUrl(v.path) ? v.path : pathResolve(parentPath, v.path)

        // 如果是第三级菜单，直接渲染为MenuItem不展开
        if (currentLevel >= 2) {
          return (
            <ElMenuItem index={fullPath}>
              {{
                default: () => renderMenuTitle(meta)
              }}
            </ElMenuItem>
          )
        }

        if (
          oneShowingChild &&
          (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
          !meta?.alwaysShow
        ) {
          return (
            <ElMenuItem
              index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
            >
              {{
                default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
              }}
            </ElMenuItem>
          )
        } else {
          // 如果是第二级菜单且有子菜单，渲染为SubMenu但限制子菜单层级
          return (
            <ElSubMenu
              index={fullPath}
              teleported
              popperClass={unref(menuMode) === 'vertical' ? `${prefixCls}-popper--vertical` : ''}
            >
              {{
                title: () => renderMenuTitle(meta),
                default: () => v.children ? renderMenuItem(v.children, fullPath, currentLevel + 1) : null
              }}
            </ElSubMenu>
          )
        }
      })
  }

  return {
    renderMenuItem: (routers: AppRouteRecordRaw[], parentPath = '/') => renderMenuItem(routers, parentPath, 1)
  }
}